<!DOCTYPE html>
<html lang="en"  ng-app="gr-app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>正月十五闹元宵</title>
    <link rel="stylesheet" type="text/css" href="/images/activity/lantern/css/style.css" >
    <link rel="stylesheet" type="text/css" href="/images/activity/lantern/css/animate.min.css" >
    <script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<!---游戏DIV-->
<div class="div-relative">
    <img src="/images/activity/lantern/backgroudimg_1.png" style="width: 100%">
    <div class="div-a"><img src="/images/activity/lantern/gamewan.png" style="width: 80%" onclick="playlao()"></div>
    <div class="div-b"><img src="/images/activity/lantern/gameszi.png" style="width: 100%" onclick="playlao()"></div>
</div>
<!------显示有多少人集齐了---->
<div class="huojiantext"  style="color: yellow">
    <div class="time"><span id="tiptext">果然100</span>
        <span id="t_d" class="hidden">00天</span>
        <span id="t_h">00时</span>
        <span id="t_m">00分</span>
        <span id="t_s">00秒</span>
    </div><!--倒计时模块-->
    当前有201200人集齐6种口味的元宵
</div>

<button onclick="laoquBtn()">中奖</button>

<!---内容-->
<img src="/images/activity/lantern/backgroudimg_2.png" style="width: 100%">
<div id="context" ng-controller="LanternResult">
    <button ng-click="alertM()">提交</button>
    <div id="chatarea">
       <table class="table1">
           <tr  valign="top">
               <td width="33%" >
                   <span class="yuanxiaonumber">2</span>
                   <img src="/images/activity/lantern/_01.png"><br/>
                   <img src="/images/activity/lantern/btn_yao.png" class="hidden">
                   <a href="/extra/lantern/song"><img src="/images/activity/lantern/btn_song.png"></a>

               </td>
               <td width="33%">
                   <span class="yuanxiaonumber hidden">0</span>
                   <img src="/images/activity/lantern/_02.png" class="gray">
                   <br/>
                   <a href="/extra/lantern/yao"><img src="/images/activity/lantern/btn_yao.png" ></a>
                   <img src="/images/activity/lantern/btn_song.png" class="hidden">

               </td>
               <td width="33%">
                   <span class="yuanxiaonumber hidden">0</span>
                   <img src="/images/activity/lantern/_03.png" class="gray">
                   <br/>
                   <img src="/images/activity/lantern/btn_yao.png" class="hidden">
                   <img src="/images/activity/lantern/btn_song.png" class="hidden">
               </td>
           </tr>
           <tr  valign="top">
               <td width="30%">
                   <span class="yuanxiaonumber hidden">0</span>
                   <img src="/images/activity/lantern/_04.png" class="gray">
                   <br/>
                   <img src="/images/activity/lantern/btn_yao.png" class="hidden">
                   <img src="/images/activity/lantern/btn_song.png" class="hidden">
               </td>
               <td width="30%">
                   <span class="yuanxiaonumber hidden">0</span>
                   <img src="/images/activity/lantern/_05.png" class="gray">
                   <br/>
                   <img src="/images/activity/lantern/btn_yao.png" class="hidden">
                   <img src="/images/activity/lantern/btn_song.png" class="hidden">
               </td>
               <td width="30%">
                   <span class="yuanxiaonumber hidden">0</span>
                   <img src="/images/activity/lantern/_06.png" class="gray">
                   <br/>
                   <img src="/images/activity/lantern/btn_yao.png" class="hidden">
                   <img src="/images/activity/lantern/btn_song.png" class="hidden">
               </td>
           </tr>
       </table>
        <table class="table2">
            <tr  valign="top">
                <td width="50%" >
                    <a href="/detail/903"><img style="width: 100%" src="/images/activity/lantern/hnqx.png"></a>
                </td>
                <td width="50%">
                    <a href="/detail/902"><img style="width: 100%" src="/images/activity/lantern/hnpl.png"></a>
                </td>
            </tr>
        </table>
    </div>
</div>
<audio id="audio" autoplay="autoplay" loop="loop" preload="auto" src="http://7d9nlm.com1.z0.glb.clouddn.com/JingCheng.mp3"></audio>
<!----------首次领取3个红包--------->
<div class="shareit" id="hidefirstdiv" style="display: none">
    <img src="/images/activity/lantern/firstGive.png" class="scjiangpingimg" onclick="hidefirstBtn()">
</div>

<!-------捞取奖品成功---->
<div class="shareit" id="laoqudiv" style="display: none">
    <img src="/images/activity/lantern/jiangping1.png" class="jiangpingimg" onclick="hidelaoqudivBtn()">
</div>

<script src="/ng/angular.min.js"></script>
<script src="/ng/angular-animate.min.js"></script>
<script src="/extra/lantern/index.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#hidefirstdiv").show();
        $('.scjiangpingimg').show();
        $('.scjiangpingimg').addClass('animated slideInDown');
        document.getElementById('audio').play();
    });
    function playlao(){
        $('.div-a').addClass('animated shake').fadeOut(1000, function () {
            $('.div-a').removeClass('animated shake');
            $('.div-a').show();

        })
    }
    //调试加入后端时删除改成angurlar方式
    function hidefirstBtn(){
        $('.scjiangpingimg').removeClass('animated slideInDown');
        $('.scjiangpingimg').addClass('animated bounceOutDown').fadeOut(500,function(){
            $(this).parent().hide();
        });
    }

    function laoquBtn(){
        $('html, body').animate({scrollTop: 0}, 'slow');
        $("#laoqudiv").show();
        $('.jiangpingimg').show();
        $('.jiangpingimg').addClass('animated slideInDown');
    }
    function hidelaoqudivBtn(){
        $('.jiangpingimg').removeClass('animated slideInDown');
        $('.jiangpingimg').addClass('animated bounceOutDown').fadeOut(500,function(){
            $(this).parent().hide();
        });
    }


    var timeandtip  = {
        nexttime: "2016/02/25 12:00:00",
        tiptext: ""
    };


    //活动提示方法
    function activityTimeTip(){
        var nowDate=new Date();
        var nowDay=nowDate.getDate(); //获取今天是几号
        var nowhour=nowDate.getHours(); //获取今天的时间
        if(nowDay<25){
            switch (nowhour){
                case 10:
                    timeandtip.nexttime="2016/02/"+nowDate.getDate()+" 11:00:00";
                    timeandtip.tiptext="活动进行中，剩余"
                    break;
                case 15:
                    timeandtip.nexttime="2016/02/"+nowDate.getDate()+" 16:00:00";
                    timeandtip.tiptext="活动进行中，剩余"
                    break;
                case 20:
                    timeandtip.nexttime="2016/02/"+nowDate.getDate()+" 21:00:00";
                    timeandtip.tiptext="活动进行中，剩余"
                    break;
                default: //如果不在活动时间点则显示下一轮的时间
                    if(nowhour>20){
                        timeandtip.nexttime="2016/02/"+(nowDate.getDate()+1)+" 10:00:00";
                        timeandtip.tiptext="下一轮开启"
                    }
                    if(nowhour>15 && nowhour <20){
                        timeandtip.nexttime="2016/02/"+(nowDate.getDate())+" 20:00:00";
                        timeandtip.tiptext="下一轮开启"
                    }
                    if(nowhour>10 && nowhour <15){
                        timeandtip.nexttime="2016/02/"+(nowDate.getDate())+" 15:00:00";
                        timeandtip.tiptext="下一轮开启"
                    }
                    if(nowhour<10){
                        timeandtip.nexttime="2016/02/"+(nowDate.getDate())+" 10:00:00";
                        timeandtip.tiptext="下一轮开启"
                    }
            }
        }else{
            //25号当天只有10点一轮
            if(nowhour<10){
                timeandtip.nexttime="2016/02/"+(nowDate.getDate())+" 10:00:00";
                timeandtip.tiptext="下一轮开启"
            }
            if(nowhour===10){
                timeandtip.nexttime="2016/02/"+nowDate.getDate()+" 11:00:00";
                timeandtip.tiptext="活动进行中，剩余"
            }
            if(nowhour>10){
                timeandtip.nexttime="2016/02/"+nowDate.getDate()+" 12:00:00";
                timeandtip.tiptext="开奖倒计时"
            }
        }
    }

    function GetRTime(){
        activityTimeTip();
        $('#tiptext').html(timeandtip.tiptext);
        var EndTime= new Date(timeandtip.nexttime);
        var NowTime = new Date();
        var t =EndTime.getTime() - NowTime.getTime();
        var d=Math.floor(t/1000/60/60/24);
        var h=Math.floor(t/1000/60/60%24);
        var m=Math.floor(t/1000/60%60);
        var s=Math.floor(t/1000%60);
        document.getElementById("t_d").innerHTML = d + "天";
        document.getElementById("t_h").innerHTML = h + "时";
        document.getElementById("t_m").innerHTML = m + "分";
        document.getElementById("t_s").innerHTML = s + "秒";
    }
    setInterval(GetRTime,0);


</script>
</body>
</html>